﻿<!--
 THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
 ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
 THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
 PARTICULAR PURPOSE.

 Copyright (c) Microsoft Corporation. All rights reserved
-->
<local:HiloPage
    x:Name="pageRoot"
    x:Uid="Page"
    x:Class="Hilo.ImageView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hilo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    DataContext="{Binding Source={StaticResource ViewModelLocator}, Path=ImageVM}">

    <Page.Resources>
        <local:FileSizeConverter x:Key="FileSizeConverter" />
        <Style x:Key="FilmStripGridViewItemStyle" 
               BasedOn="{StaticResource HiloGridViewItemStyle}" 
               TargetType="GridViewItem">
            <Setter Property="Margin" Value="0,0,2,4" />
        </Style>
    </Page.Resources>

    <local:HiloPage.TopAppBar>
        <AppBar x:Name="ImageViewTopAppBar"
                x:Uid="AppBar"
                AutomationProperties.AutomationId="ImageViewTopAppBar"
                Padding="10,0,10,0">
            <Grid d:DataContext="{Binding Source={d:DesignInstance Type=local:DesignTimeData, IsDesignTimeCreatable=True}}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button x:ConnectionId='0' x:Name="FilmStripBackButton" 
                        AutomationProperties.AutomationId="FilmStripBackButton" 
                                       
                        IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
                        Margin="26,53,36,36"
                        Style="{StaticResource BackButtonStyle}"
                        VerticalAlignment="Top"/>
                <GridView x:Name="PhotosFilmStripGridView"
                          Grid.Column="1"
                          AutomationProperties.AutomationId="PhotosFilmStripGridView"
                          IsItemClickEnabled="False"
                          ItemContainerStyle="{StaticResource FilmStripGridViewItemStyle}"
                          ItemsSource="{Binding Photos}"
                          SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}"
                          SelectionMode="Single"
                          VerticalAlignment="Center">
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Height="138" Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Border>
                                <Image Source="{Binding Path=Thumbnail}" 
                                       Height="138" 
                                       Width="200" 
                                       Stretch="UniformToFill" />
                            </Border>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </Grid>
        </AppBar>
    </local:HiloPage.TopAppBar>

    <Grid x:Name="ContentRoot"
          d:DataContext="{Binding Source={d:DesignInstance Type=local:DesignTimeData, IsDesignTimeCreatable=True}}"
          Background="{StaticResource HiloPageBackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:ConnectionId='0' x:Name="BackButton"
                    AutomationProperties.AutomationId="BackButton"
                                  
                    IsEnabled="true"
                    Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="PageTitle"
                       Grid.Column="1"
                       Style="{StaticResource PageHeaderTextStyle}"
                       Text="{Binding MonthAndYear}"/>
        </Grid>
        <Grid x:Name="PhotoGrid"
              Grid.Row="1">
            <Popup x:Name="ImageViewFileInformationPopup"
                   AutomationProperties.AutomationId="ImageViewFileInformationPopup">
                <Popup.Child>
                    <Border Background="{StaticResource GreySplashScreenColor}"
                            BorderBrush="{StaticResource HiloBorderBrush}"
                            BorderThickness="3">
                        <Grid Margin="10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding Path=SelectedItem.Thumbnail}" 
                                   Height="105" 
                                   Width="105" 
                                   Stretch="UniformToFill" />
                            <StackPanel Grid.Column="1" 
                                        Margin="10,0,10,0">
                                <TextBlock Foreground="{StaticResource ApplicationForegroundThemeBrush}" 
                                           FontWeight="Bold"
                                           Text="{Binding Path=SelectedItem.Name}" 
                                           TextWrapping="Wrap"/>
                                <TextBlock Foreground="{StaticResource ApplicationForegroundThemeBrush}"
                                           Text="{Binding Path=SelectedItem.DisplayType}"/>
                                <TextBlock Foreground="{StaticResource ApplicationForegroundThemeBrush}" 
                                           Text="{Binding Path=SelectedItem.Resolution}" />
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Foreground="{StaticResource ApplicationForegroundThemeBrush}" 
                                               Text="{Binding Path=SelectedItem.FormattedDateTaken}" />
                                    <TextBlock Foreground="{StaticResource ApplicationForegroundThemeBrush}"
                                               Margin="4,0,0,0"
                                               Text="{Binding Path=SelectedItem.FormattedTimeTaken}" />
                                </StackPanel>
                                <TextBlock Foreground="{StaticResource ApplicationForegroundThemeBrush}" 
                                           Text="{Binding Path=SelectedItem.FileSize, Converter={StaticResource FileSizeConverter}}" />
                                <TextBlock Foreground="{StaticResource ApplicationForegroundThemeBrush}"
                                           Margin="0,20,0,0"
                                           Text="{Binding Path=SelectedItem.FormattedPath}" />
                            </StackPanel>
                        </Grid>
                    </Border>
                </Popup.Child>
            </Popup>
            <Border Margin="0,-3,0,0">
                <Image x:ConnectionId='0' AutomationProperties.AutomationId="ImageControl"
                       HorizontalAlignment="Center"
                                                             
                                                               
                                                         
                       Source="{Binding Path=SelectedItem.Image}"
                       VerticalAlignment="Center">
                </Image>
            </Border>
        </Grid>

        <ListView x:Name="SnappedPhotosFilmStripListView"
                  Grid.Row="1"
                  AutomationProperties.AutomationId="SnappedPhotosFilmStripListView"
                  Margin="0,-10,0,0"
                  Padding="10,0,0,60"
                  ItemsSource="{Binding Photos}" 
                  IsItemClickEnabled="False"
                  ItemContainerStyle="{StaticResource HiloListViewItemStyle}"
                  SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                  SelectionMode="Single"
                  Visibility="Collapsed">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Border>
                        <Image Source="{Binding Path=Thumbnail}" 
                               Stretch="UniformToFill" />
                    </Border>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackButton" 
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RotateButton"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CropButton"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CartoonizeButton"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RotateButtonNoLabel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CropButtonNoLabel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CartoonizeButtonNoLabel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackButton" 
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageTitle" 
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PhotoGrid" 
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnappedPhotosFilmStripListView" 
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageViewTopAppBar" 
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" 
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RotateButton"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CropButton"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CartoonizeButton"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RotateButtonNoLabel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CropButtonNoLabel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CartoonizeButtonNoLabel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>

    <local:HiloPage.BottomAppBar>
        <AppBar x:Name="ImageViewBottomAppBar"
                x:Uid="AppBar"
                AutomationProperties.AutomationId="ImageViewBottomAppBar"
                Padding="10,0,10,0">
            <Grid>
                <StackPanel HorizontalAlignment="Left" 
                            Orientation="Horizontal">
                    <Button x:Name="RotateButton"
                            x:Uid="RotateAppBarButton"
                            Command="{Binding RotateImageCommand}" 
                            Style="{StaticResource RotateAppBarButtonStyle}" 
                            Tag="Rotate" />
                    <Button x:Name="CropButton"
                            x:Uid="CropAppBarButton"
                            Command="{Binding CropImageCommand}"
                            Style="{StaticResource CropAppBarButtonStyle}"
                            Tag="Crop" />
                    <Button x:Name="CartoonizeButton"
                            x:Uid="CartoonizeAppBarButton"
                            Command="{Binding CartoonizeImageCommand}"
                            Style="{StaticResource CartoonEffectAppBarButtonStyle}"
                            Tag="Cartoon effect" />
                    <Button x:Name="RotateButtonNoLabel"
                            Command="{Binding RotateImageCommand}" 
                            Style="{StaticResource RotateAppBarButtonNoLabelStyle}" 
                            Tag="Rotate"
                            Visibility="Collapsed">
                        <ToolTipService.ToolTip>
                            <ToolTip x:Uid="RotateAppBarButtonToolTip" />
                        </ToolTipService.ToolTip>
                    </Button>
                    <Button x:Name="CropButtonNoLabel"
                            Command="{Binding CropImageCommand}"
                            Style="{StaticResource CropAppBarButtonNoLabelStyle}"
                            Tag="Crop"
                            Visibility="Collapsed">
                        <ToolTipService.ToolTip>
                            <ToolTip x:Uid="CropAppBarButtonToolTip" />
                        </ToolTipService.ToolTip>
                    </Button>
                    <Button x:Name="CartoonizeButtonNoLabel"
                            Command="{Binding CartoonizeImageCommand}"
                            Style="{StaticResource CartoonEffectAppBarButtonNoLabelStyle}"
                            Tag="Cartoon effect"
                            Visibility="Collapsed">
                        <ToolTipService.ToolTip>
                            <ToolTip x:Uid="CartoonizeAppBarButtonToolTip" />
                        </ToolTipService.ToolTip>
                    </Button>
                </StackPanel>
            </Grid>
        </AppBar>
    </local:HiloPage.BottomAppBar>
</local:HiloPage>

